<script setup lang="ts">
import moment from 'moment'
import { computed } from "vue";
import { availableDateStr } from '../../utils'

const props = defineProps<{ data: Profile[] }>();
const emit = defineEmits(["profile-pick"]);

const profiles = computed(() => {
    return props.data
})

const go = (id: string): void => {
    emit("profile-pick", id);
};
</script>
<template>
    <section>
        <ul class="profiles">
            <li v-for="profile in profiles" class="profile">
                <div class="allRow" @click="go(profile.id)">
                    <div class="rowLeft">
                        <div class="avatar" :class="profile.gender">{{ profile.name.slice(0, 1) }}</div>
                    </div>
                    <div class="rowMiddle">
                        <div class="firstRow">
                            <span>{{ profile.name }}</span>
                            <!-- <span>学历：{{ profile.education && profile.education.diploma }}</span> -->
                        </div>
                        <div class="secondRow">
                            <span>{{ profile.age }}岁</span>
                        </div>
                    </div>
                    <div class="rowRight">
                        <div
                            :class="{ green: moment(profile.availability.availableDate).isSameOrBefore(moment()) }"
                        >{{ availableDateStr(profile.availability.availableDate) }}</div>
                        <div class="keruchang">可入场</div>
                    </div>
                </div>
            </li>
        </ul>
    </section>
</template>

<style scoped>
ul.profiles {
    list-style: none;
    margin: 0;
    padding: 0;
}
.profile {
    margin: 5px;
    padding: 20px;
    border-bottom: 1px solid lightgray;
}
.avatar {
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    color: white;
}
.rowMiddle {
    flex: 2;
}
.rowMiddle span {
    margin: 20px;
}
.allRow {
    display: flex;
    flex-direction: row;
}
.rowLeft {
    width: 60px;
}

.rowRight {
    flex: 1;
    text-align: center;
}
.firstRow {
    font-size: 20px;
    font-weight: 20px;
}
.secondRow {
    color: #828282;
}
.M {
    background-color: #4882f1;
}
.F {
    background-color: #ed60b4;
}
.keruchang {
    font-size: 14px;
    font-weight: 200;
    color: #363636;
}
.green {
    display: inline-block;
    color: #15be47;
    padding: 2px 16px;
    font-weight: 500;
    border: solid 2px #15be47;
    border-radius: 6px;
}

/* 响应式布局 */

/* #square{
	width:100px;
	height:100px;
}
@media only screen and (min-width: 320px) {
    #square {
        background:red;
    }
}
@media only screen and (min-width: 320px) and (max-width: 320px) {
    #square {
        background:yellow;
   }
} */
</style>